Išsamus frontend kodo padalijimo metodų vadovas, kuriame daugiausia dėmesio skiriama pagal maršrutą ir pagal komponentą metodams, siekiant pagerinti našumą ir vartotojo patirtį.
Frontend kodo padalijimas: pagal maršrutą ir pagal komponentą
Šiuolaikinio žiniatinklio kūrimo srityje svarbiausia yra užtikrinti greitą ir jautriai reaguojančią vartotojo patirtį. Kai programos tampa sudėtingesnės, JavaScript paketų dydis gali išsipūsti, o tai lemia ilgesnį pradinį įkėlimo laiką ir lėtą vartotojo patirtį. Kodo padalijimas yra galinga technika, skirta kovoti su šia problema, suskaidant programos kodą į mažesnius, lengviau valdomus gabalus, kuriuos galima įkelti pagal poreikį.
Šiame vadove nagrinėjamos dvi pagrindinės frontend kodo padalijimo strategijos: pagal maršrutą ir pagal komponentą. Mes gilinsimės į kiekvieno metodo principus, aptarsime jų privalumus ir trūkumus bei pateiksime praktinių pavyzdžių, iliustruojančių jų įgyvendinimą.
Kas yra kodo padalijimas?
Kodo padalijimas – tai monolitinio JavaScript paketo padalijimo į mažesnius paketus arba gabalus praktika. Užuot iš anksto įkėlus visą programos kodą, įkeliamas tik būtinas kodas dabartiniam vaizdui ar komponentui. Tai sumažina pradinį atsisiuntimo dydį, todėl puslapiai įkeliami greičiau ir pagerėja suvokiamas našumas.
Pagrindiniai kodo padalijimo privalumai:
- Pagerintas pradinis įkėlimo laikas: Mažesni pradiniai paketų dydžiai reiškia greitesnį įkėlimą ir geresnį pirmąjį įspūdį vartotojams.
- Sumažintas analizės ir kompiliavimo laikas: Naršyklės praleidžia mažiau laiko analizuodamos ir kompiliuodamos mažesnius paketus, o tai lemia greitesnį atvaizdavimą.
- Pagerinta vartotojo patirtis: Greitesnis įkėlimo laikas prisideda prie sklandesnės ir jautriau reaguojančios vartotojo patirties.
- Optimizuotas resursų naudojimas: Įkeliamas tik būtinas kodas, taupant pralaidumą ir įrenginio resursus.
Kodo padalijimas pagal maršrutą
Kodo padalijimas pagal maršrutą apima programos kodo padalijimą pagal programos maršrutus arba puslapius. Kiekvienas maršrutas atitinka atskirą kodo gabalą, kuris įkeliamas tik tada, kai vartotojas pereina į tą maršrutą. Šis metodas ypač efektyvus programoms su skirtingomis sekcijomis ar funkcijomis, kurios nėra dažnai naudojamos.
Įgyvendinimas
Šiuolaikinės JavaScript karkasai, tokie kaip React, Angular ir Vue, teikia integruotą palaikymą kodo padalijimui pagal maršrutą, dažnai naudojant dinaminius importus. Štai kaip tai veikia konceptualiai:
- Apibrėžkite maršrutus: Apibrėžkite programos maršrutus naudodami maršrutizavimo biblioteką, pvz., React Router, Angular Router arba Vue Router.
- Naudokite dinaminius importus: Užuot importavę komponentus tiesiogiai, naudokite dinaminius importus (
import()), kad įkeltumėte juos asinchroniškai, kai aktyvuojamas atitinkamas maršrutas. - Konfigūruokite kūrimo įrankį: Konfigūruokite savo kūrimo įrankį (pvz., webpack, Parcel, Rollup), kad atpažintų dinaminius importus ir sukurtų atskirus gabalus kiekvienam maršrutui.
Pavyzdys (React su React Router)
Panagrinėkime paprastą React programą su dviem maršrutais: /home ir /about.
// App.js
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));
function App() {
return (
Loading... Šiame pavyzdyje Home ir About komponentai yra įkeliami vangiai naudojant React.lazy() ir dinaminius importus. Komponentas Suspense pateikia atsarginę vartotojo sąsają, kol komponentai yra įkeliami. React Router tvarko navigaciją ir užtikrina, kad būtų atvaizduotas teisingas komponentas, atsižvelgiant į dabartinį maršrutą.
Pavyzdys (Angular)
Angular programoje kodo padalijimas pagal maršrutą pasiekiamas naudojant vangiai įkeliamus modulius.
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
{ path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Čia loadChildren savybė maršruto konfigūracijoje nurodo kelią iki modulio, kuris turėtų būti įkeltas vangiai. Angular maršrutizatorius automatiškai įkels modulį ir su juo susijusius komponentus tik tada, kai vartotojas pereis į atitinkamą maršrutą.
Pavyzdys (Vue.js)
Vue.js taip pat palaiko kodo padalijimą pagal maršrutą, naudojant dinaminius importus maršrutizatoriaus konfigūracijoje.
// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{ path: '/', component: () => import('./components/Home.vue') },
{ path: '/about', component: () => import('./components/About.vue') }
];
const router = new VueRouter({
routes
});
export default router;
component parinktis maršruto konfigūracijoje naudoja dinaminį importą, kad komponentas būtų įkeltas asinchroniškai. Vue Router tvarkys komponento įkėlimą ir atvaizdavimą, kai bus pasiektas maršrutas.
Kodo padalijimo pagal maršrutą privalumai
- Paprasta įgyvendinti: Kodo padalijimą pagal maršrutą yra gana paprasta įgyvendinti, ypač su šiuolaikinių karkasų teikiama pagalba.
- Aiškus atsakomybių atskyrimas: Kiekvienas maršrutas atspindi atskirą programos dalį, todėl lengva suprasti kodą ir jo priklausomybes.
- Efektyvu didelėms programoms: Kodo padalijimas pagal maršrutą ypač naudingas didelėms programoms su daug maršrutų ir funkcijų.
Kodo padalijimo pagal maršrutą trūkumai
- Gali būti nepakankamai detalus: Kodo padalijimo pagal maršrutą gali nepakakti programoms su sudėtingais komponentais, kurie yra bendrinami keliuose maršrutuose.
- Pradinis įkėlimo laikas vis tiek gali būti ilgas: Jei maršrute yra daug priklausomybių, pradinis to maršruto įkėlimo laikas vis tiek gali būti didelis.
Kodo padalijimas pagal komponentą
Kodo padalijimas pagal komponentą kodo padalijimą perkelia dar vienu žingsniu toliau, suskaidydamas programos kodą į mažesnius gabalus, remiantis atskirais komponentais. Šis metodas leidžia detaliau valdyti kodo įkėlimą ir gali būti ypač efektyvus programoms su sudėtingomis vartotojo sąsajomis ir daugkartinio naudojimo komponentais.
Įgyvendinimas
Kodo padalijimas pagal komponentą taip pat remiasi dinaminiais importais, tačiau vietoj viso maršruto įkėlimo, pagal poreikį įkeliami atskiri komponentai. Tai galima pasiekti naudojant tokias technikas kaip:
- Vangus komponentų įkėlimas: Naudokite dinaminius importus, kad komponentai būtų įkeliami tik tada, kai jų prireikia, pavyzdžiui, kai jie atvaizduojami pirmą kartą arba kai įvyksta tam tikras įvykis.
- Sąlyginis atvaizdavimas: Atvaizduokite komponentus sąlygiškai, atsižvelgiant į vartotojo sąveiką ar kitus veiksnius, įkeliant komponento kodą tik tada, kai sąlyga yra patenkinama.
- Intersection Observer API: Naudokite Intersection Observer API, kad nustatytumėte, kada komponentas yra matomas peržiūros srityje, ir atitinkamai įkeltumėte jo kodą. Tai ypač naudinga įkeliant komponentus, kurie iš pradžių yra už ekrano ribų.
Pavyzdys (React)
import React, { Suspense, lazy } from 'react';
const MyComponent = lazy(() => import('./MyComponent'));
function App() {
return (
Loading... }>